<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>干线协调优化平台 - 顶部导航组件</title>
    <link rel="stylesheet" href="../libs/fontawesome/6.7.2/css/all.min.css">
    <link rel="stylesheet" href="../common/base.css">
    <link rel="stylesheet" href="./headnav.css">
</head>
<body>
    <!-- 顶部导航栏组件 -->
    <header id="main-header" class="layout-header">
        <div class="layout-logo">
            <span class="logo-icon"><i class="fas fa-traffic-light"></i></span>
            <span class="logo-text">干线协调优化平台</span>
        </div>
        
        <div class="header-spacer"></div>
        
        <nav class="header-nav">
            <a href="#" class="nav-item">
                <i class="fas fa-tachometer-alt"></i>
                <span>概览</span>
            </a>
            <a href="#" class="nav-item">
                <i class="fas fa-chart-line"></i>
                <span>数据分析</span>
            </a>
            <a href="#" class="nav-item">
                <i class="fas fa-cog"></i>
                <span>配置</span>
            </a>
        </nav>
        
        <div class="header-widgets">
            <div class="weather-widget">
                <span class="weather-icon"><i class="fas fa-sun"></i></span>
                <span class="weather-text">晴 28°C</span>
            </div>
            <div class="sync-widget">
                <span class="sync-icon"><i class="fas fa-sync-alt"></i></span>
                <span class="sync-text">实时同步中</span>
            </div>
            <div class="user-profile">
                <span class="user-icon"><i class="fas fa-user-circle"></i></span>
                <span class="user-name">管理员</span>
            </div>
        </div>
    </header>
    
    <!-- 演示内容区域 -->
    <main class="demo-content">
        <div class="demo-card">
            <h2>顶部导航组件演示</h2>
            <p>这是一个独立的顶部导航组件，可以在其他页面中复用。</p>
            <div class="demo-features">
                <div class="feature-item">
                    <i class="fas fa-check-circle"></i>
                    <span>响应式设计</span>
                </div>
                <div class="feature-item">
                    <i class="fas fa-check-circle"></i>
                    <span>FontAwesome图标</span>
                </div>
                <div class="feature-item">
                    <i class="fas fa-check-circle"></i>
                    <span>科技感视觉效果</span>
                </div>
                <div class="feature-item">
                    <i class="fas fa-check-circle"></i>
                    <span>模块化组件设计</span>
                </div>
            </div>
        </div>
    </main>
</body>
</html>